<template>
  <div class="block">
    <div class="block-header">
      <div class="header-left">
        <svg-icon v-if="icon" :icon-class="icon" />
        <span v-if="title">{{ title }}</span>
        <slot name="header_left" />
      </div>
      <div>
        <slot name="header_middle" />
      </div>
      <div class="header-right">
        <slot name="header_right" />
      </div>
    </div>
    <div ref="main" class="block-main" :class="{'block-main-border':!noBorder}">
      <slot name="main" />
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Block',
  props: {
    title: { type: String, default: null },
    icon: { type: String, default: null },
    screen: { type: Boolean, default: false },
    noBorder: { type: Boolean, default: false }
  }
}
</script>

<style lang="scss" scoped>
.block{
  width: 100%;
  border-radius:2px;
  margin-bottom:8px;
  .block-header{
    position: relative;
    background:rgba(248,248,248,1);
    border: 1px solid $border_color;
    border-bottom: none;
    border-radius:2px 2px 0px 0px;
    height:50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px 0 20px;
    .header-left{
      display: flex;
      align-items: center;
      color:#606266;
      span{
        margin:0 30px 0 8px;
      }
    }
    .header-right{
      display: flex;
      align-items: center;
      .openScreen{
        color:#606266;
        transition: display 1s;
        cursor: pointer;
        margin: 0 31px 0 0;
        user-select: none;
        span{
        i{
          padding: 0 6px;
        }
        }
      }
    }
  }
  .block-main{
    background: #fff
  }
  .block-main-border{
    border: 1px solid $border_color;
  }
}
</style>
